<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机选择器</title>
    <style>
        /* 页面css样式 */

        .wrapper {
            width: 1000px;
            margin: 100px auto;
            border: 1px solid #ddd;
            text-align: center;
        }

        .box li {
            vertical-align: top;
            display: inline-block;
            width: 100px;
            height: 50px;
            border: 2px solid #ddd;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            margin: 5px;
            font-weight: bold;
            background: linear-gradient(90deg, #3c33b3, #FF00AF);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            box-shadow: 10px 10px 10px -7px rgb(158, 157, 157);
        }

        .wrapper button {
            border: none;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            cursor: pointer;
            outline: none;
            margin: 20px 10px 0 0;
            font-weight: bolder;
            font-size: 30px;
            background: linear-gradient(90deg, #ead6ee, #a0f1ea);
            color: #fff;
            box-shadow: 10px 10px 10px -7px rgb(158, 157, 157);
        }

        body {
            background-color: #eee;
        }

        h1,
        h6 {
            text-align: center;
            background: linear-gradient(90deg, #f9957f, #f2f5d0);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <h1>23级3+2大数据2班</h2>
            <h6 id="data"></h6>
            <ul class="box"></ul>
            <button class="start">start</button>
            <button class="stop">stop</button>
    </div>
    <script>
        
        //定义全局变量方便引用
        var boxUl = document.getElementsByClassName('box')[0];
        var start = document.getElementsByClassName('start')[0];
        var stop = document.getElementsByClassName('stop')[0];
        var oLi = document.getElementsByTagName('li');
        //页面初始化时间调用
        datatime();
        //页面时间动态刷新
        setInterval(datatime, 1000);
        function datatime() {
            let data = new Date();  //时间戳
            let dataString = "现在是北京时间：" + data.toLocaleString();
            document.getElementById("data").innerHTML = dataString;
        }

        //数据准备
        var nameArr = [
        '秦静',
        '庹弘扬',
        '倪濠',
        '代林康',
        '谢显峰',
        '周林',
        '田洪立',
        '石成文',
        '张棋',
        '董长洁',
        '李好',
        '莫昌杰',
        '李霜',
        '孙圳',
        '李博',
        '傅植',
        '陈仲帅',
        '龚璐',
        '庞森铃',
        '王康霖',
        '肖杭',
        '肖晗',
        '冉杰',
        '刘迈荻',
        '廖明阳',
        '向豪',
        '张應高',
        '向政',
        '颜宇航',
        '杨帅',
        '何家驹',
        '田炼',
        '周炳燃',
        '谭鹏',
        '王骥',
        '冉琴',
        '张瑜千',
        '唐金桥',
        '陈小敏',
        '吴丽娟',
        '曾晓琳',
        '刘青青',
        '任娜',
        '吴敏',
        '钱衍西',
        '李恋',
        '石雨雨',
        '李晓娟',
        '曾燕雪',
        '龚万猛',
        '冉桎',
        '李国栋',
        '谢奕',
        '田瑞',
                ];
        //获取每个学生姓名添加到标签中，自动解析html标签
        var str = "";
        for (let i = 0; i < nameArr.length; i++) {
            str += "<li>" + nameArr[i] + "</li>"  
        }
        boxUl.innerHTML = str;
        //添加开始按钮的点击事件
        var timer = null;
        start.onclick = function () {
            // 禁止再次点击事件叠加
            this.disabled = true;
            // 设置定时器
            timer = setInterval(function () {
                // 根据数组长度范围生成随机数
                var i = Math.floor(Math.random() * nameArr.length);
                if (i == 2) { i = nameArr.length - 1 };
                // 先通过for循环清空所有style属性
                for (var j = 0; j < oLi.length; j++) {
                    oLi[j].removeAttribute("style");
                }
                // 为随机选择的li颜色属性
                oLi[i].style.border = "2px solid red";  //外边框
            }, 50);
        };
        // 点击停止
        stop.onclick = function () {
            // 清空定时器停止点名
            clearInterval(timer);
            // 允许start可以再次点击
            start.disabled = false;
        }
    </script>
</body>

</html>